!-- 医药公司信息管理 -->
<template>
 <div>
  <el-container>

   <!-- 头部区域 -->
   <el-header height="76px">
    <h2>医药公司信息管理</h2>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
     <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
     <el-breadcrumb-item>医药公司信息管理</el-breadcrumb-item>
    </el-breadcrumb>
   </el-header>
   <!-- 主体内容区域 -->
   <el-main>
    <!--header -->
    <div class="main-title">
     <h3>医药公司信息列表</h3>
     <button
         class="new-add"
         @click="addFormVisible = true"
     />
    </div>
    <!-- 搜索-->
    <el-row :gutter="20">
     <el-col :span="23" class="search-col">
      <keep-alive>
       <el-input
           placeholder="查询（输入要查询的公司名称）"
           size="small"
           v-model="keyword"
           @input="sendKey()"
       >
       </el-input>
      </keep-alive>
     </el-col>
    </el-row>
    <!-- 表格   :default-sort="{ prop: 'date', order: 'descending' }"
        :data="tableData.list"-->
    <el-table
        stripe
        highlight-current-row
        :data="drugCompanyData"
        :default-sort="{ prop: 'companyId', order: 'descending' }"
    >
     <el-table-column prop="companyId" label="医药公司编号" sortable>
     </el-table-column>
     <el-table-column prop="companyName" label="公司名称">
     </el-table-column>
     <el-table-column prop="companyPhone" label="公司电话">
     </el-table-column>
     <el-table-column prop="companyOperation" label="操作" >
<!--       通过slot-scope拿到对应行的数据-->
      <template slot-scope="scope">
       <button
           class="table-btn-delete"
           @click="deleteCompany(scope.row.companyId,scope.row.companyName)"
       ></button>
       <button
           class="table-btn-update"
           @click="handleModifyOpen(scope.row)"
       ></button>
      </template>
     </el-table-column>
    </el-table>
    <!-- 分页-->
    <div class="pagination">
      <el-pagination
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :layout="'total,prev,pager,next,jumper'"
          :total="dataTotal"
          @current-change="handleCurrentChange"
      />
    </div>
   </el-main>
   <!-- 点击新增后的弹窗 -->
   <el-dialog
       title="新增医药公司"
       :visible.sync="addFormVisible"
       :modal-append-to-body="false"
       @close="handleAddClose"
   >
    <el-form
        :model="addForm"
        hide-required-asterisk
        ref="addForm"
        label-width="110px"
    >
     <el-form-item
         label="公司名称"
         prop="companyName"
         :rules="rules.nameRules"
     >
      <el-input
          v-model.trim="addForm.companyName"
          autocomplete="off"
          required
      ></el-input>
     </el-form-item>
     <el-form-item
         label="公司电话"
         prop="companyPhone"
         :rules="rules.phoneRules"
     >
      <el-input
          v-model.number="addForm.companyPhone"
          autocomplete="off"
          required
      ></el-input>
     </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
     <el-button @click="addFormVisible = false">取 消</el-button>
     <el-button type="primary" @click="addDrugCompany('addForm')"
     >确 定</el-button
     >
    </div>
   </el-dialog>
   <!-- 点击修改后的弹窗  -->
   <el-dialog
       title="修改医药公司信息"
       :visible.sync="modifyFormVisible"
       :modal-append-to-body="false"
       @close="handleModifyClose"
   >
    <el-form
        :model="modifyForm"
        hide-required-asterisk
        ref="modifyForm"
        label-width="110px"
    >
     <el-form-item label="医药公司编号">
      <el-input
          v-model="modifyForm.companyId"
          autocomplete="off"
          disabled
      ></el-input>
     </el-form-item>
     <el-form-item
         label="公司名称"
         prop="companyName"
         :rules="rules.nameRules"
     >
      <el-input
          v-model.trim="modifyForm.companyName"
          autocomplete="off"
          required
      ></el-input>
     </el-form-item>
     <el-form-item
         label="公司电话"
         prop="companyPhone"
         :rules="rules.phoneRules"
     >
      <el-input
          v-model.number="modifyForm.companyPhone"
          autocomplete="off"
          required
      ></el-input>
     </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
     <el-button @click="modifyFormVisible = false">取 消</el-button>
     <el-button type="primary" @click="modifyCompany('modifyForm')"
     >确 定</el-button
     >
    </div>
   </el-dialog>
  </el-container>
 </div>
</template>

<script >
import rules from "../../utils/validator";
import service from "@/utils/request";
 export default {
    name: "DrugCompany",
     data(){
        return{
         drugCompanyData:[],
         currentPage: 1,
         pageSize: 5, // 每页的数据条数
         keyword: "",
         dataTotal:0,
         addFormVisible: false, // 控制新增公司页面的显示
         addForm: {
          companyName: "",
          companyPhone: "",
         },
         modifyFormVisible: false, // 控制修改信息页面的显示
         modifyForm: {
          companyId: "",
          companyName: "",
          companyPhone: "",
         },
         rules, // 封装好的表单验证
        };
     },
  //Dom挂载，可以使用data属性中的数据
  mounted() {
   this.getDrugCompanies();
  },
  methods:{
   //获取输入的关键字
   sendKey(){
    this.currentPage=1
    this.doSearch()
   },
   doSearch(){
    //调用接口模糊查询
    service.get("/company/getDrugCompany",{
     params:{
      key:this.keyword,
      currentPage:this.currentPage,
      pageSize:this.pageSize
     }
    }).then(res=>{
     if(res.code===200){
      this.drugCompanyData=res.data.records
      this.dataTotal=res.data.total
     }else {
       //没有更多数据，更新表组件数据
       this.drugCompanyData=[]
       this.dataTotal=0
      this.currentPage=1
     }
    })
   },
   //修改医药公司
   modifyCompany(formName){
    let param={
     companyId:this.modifyForm.companyId,
     companyName:this.modifyForm.companyName,
     companyPhone:this.modifyForm.companyPhone
    }
    this.$refs[formName].validate((valid) => {
     //检查表单
     if (valid) {
      //发送修改请求
     service.post("/company/ModifyDrugCompany",param)
        .then(res=>{
         if(res.code===200){
          this.$message({
           message: res.message,
           type:"success"
          })
          this.modifyFormVisible=false
          //刷新页面
          this.getDrugCompanies()

         }else {
          this.$message({
           message: res.message,
           type:"error"
          })
         }
        })
      }else {
       this.$message.error('请按照要求输入');
       return false;
     }
    });
   },

   //删除医药公司
   deleteCompany(id,companyName){
    this.$confirm(
        `确定要删除“${companyName}”的相关信息吗？该操作会同时删除对应的公司政策`,
        "提示",
        {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
        })
        .then(() => {
            service.get("/company/deleteDrugCompanyById/"+id).then(res=>{
              if(res.code===200){
                  this.$message({
                   message: res.message,
                   type:"success"
                  })
               //刷新页面
               this.currentPage=1
               this.getDrugCompanies()
              }else {
               this.$message({
                message: res.message,
                type:"error"
               })
              }}
            )})
        .catch(() => {
         this.$message({
          type: "info",
          message: "已取消删除",
         });
        })
   },

   //添加药物公司
   addDrugCompany(formName){
    this.$refs[formName].validate((valid) => {
     //检查表单
     if (valid) {
      service.post("/company/addDrugCompany",
          {
           companyName: this.addForm.companyName,
           companyPhone: this.addForm.companyPhone
          })
          .then(res => {
           if (res.code === 200) {
            this.$message({
             message: res.message,
             type: "success"
            })
            this.addFormVisible = false
            //刷新页面，同步数据库页码，并跳到最后一页
            this.getDrugCompanies().then(()=>{
             this.currentPage=Math.ceil(this.total / this.pageSize);//计算总页数，并赋值该当前页
             this.getDrugCompanies()
            })

           } else {
            this.$message({
             message: res.message,
             type: "error"
            })
           }
          })
     }else {
         this.$message.error('请按照要求输入');
         return false;
      }
    });
   },
   //获取所有公司
    getDrugCompanies(){
      return  service.get("/company/getDrugCompany",{
       params:{
        currentPage:this.currentPage,
        pageSize:this.pageSize
       }
      }).then((res)=>{
        if(res.code===200){
          this.drugCompanyData=res.data.records
         this.dataTotal = res.data.total
       }else {
         this.drugCompanyData=[]
         this.dataTotal=0
         this.currentPage=1
       }
      })
    },
   //点击某一行修改按钮时，开启弹窗，给表单赋值
   handleModifyOpen(oldData){
    this.modifyFormVisible=true;
    this.modifyForm=oldData;
   },
   // 每次关闭表单的时候重置表单
   handleAddClose() {
    this.addForm = {};
    this.$refs.addForm.resetFields();
   },
   handleModifyClose() {
    this.$refs.modifyForm.clearValidate();
   },
   //分页器页码改变时触发
   handleCurrentChange(){
    if (this.keyword.length) {
     this.doSearch();
    } else {
     this.getDrugCompanies();
    }
   },
  }
 };
</script>
<style lang="less" scoped>
@import "../../style/infoManage.less";
</style>